<template>
  <div>
    <!--顶部-->
    <div class="top-bar">
      <!-- 图片轮播效果 -->
      <b-carousel
        id="top-pic1"
        style="text-shadow:0 0 2px #000"
        fade
        indicators
        img-width="100%"
        img-height="100%">
        <b-carousel-slide
          v-for="(img, index) in lifeCarouselSlideImages"
          :img-src="img"
          :key="index" />
      </b-carousel>
    </div>
    <!--中部-->
    <div class="middle-form">
      <b-nav tabs
             justified>
        <b-nav-item>
          <EMButton pageSelector="#sidebar-1">
            <svg class="icon"
                 aria-hidden="true">
              <use xlink:href="#icon-take-out-copy-copy"></use>
            </svg>
            <div>外卖</div>
          </EMButton>
        </b-nav-item>
        <b-nav-item>
          <EMButton @emButtonClick="transToNurse">
            <svg class="icon"
                 aria-hidden="true">
              <use xlink:href="#icon-baomu"></use>
            </svg>
            <div>保姆</div>
          </EMButton>
        </b-nav-item>
        <b-nav-item>
          <EMButton @emButtonClick="transToClean">
            <svg class="icon"
                 aria-hidden="true">
              <use xlink:href="#icon-baojie2-copy"></use>
            </svg>
            <div>保洁</div>
          </EMButton>
        </b-nav-item>
        <b-nav-item>
          <EMButton page-selector="#sidebar-2">
            <svg class="icon"
                 aria-hidden="true">
              <use xlink:href="#icon-dianshang1-copy"></use>
            </svg>
            <div>电商</div>
          </EMButton>
        </b-nav-item>
      </b-nav>
      <LifeTakeaway />
      <LifeECommerce />
    </div>
    <div
      class="middle-content"
      v-infinite-scroll="loadMore"
      v-if="isShow">
      <EMListItem
        v-for="(item, index) in nurseList"
        :product="item"
        :id="index"
        :key="index"/>
    </div>
    <div
      class="middle-content"
      v-else>
      <LifeClean />
    </div>
  </div>
</template>

<script>
// 引入组件
import EMButton from '@/components/EMButton/EMButton'
import LifeTakeaway from '../components/Life/LifeTakeaway'
import LifeECommerce from '../components/Life/LifeECommerce'
import EMListItem from '@/components/EMListItem/EMListItem'
import LifeClean from '@/components/Life/LifeClean'
// 引入数据
import {
  lifeCarouselSlideImages,
  lifeEvaluationTitle
} from '../components/Life'

export default {
  name: 'Life',
  components: {
    EMButton,
    LifeTakeaway,
    LifeECommerce,
    EMListItem,
    LifeClean
  },
  data () {
    return {
      currentPage: 'nurse',
      nurseList: [],
      isShow: true,
      lifeCarouselSlideImages,
      lifeEvaluationTitle
    }
  },
  methods: {
    transToNurse () {
      this.currentPage = 'nurse'
      this.isShow = true
    },
    transToClean () {
      this.currentPage = 'clean'
      this.isShow = false
    },
    async loadMore () {
      const { data } = await this.axios('/api/productListData')
      this.nurseList.push(...data)
    }
  },
  async mounted () {
    const { data } = await this.axios('/api/productListData')
    this.nurseList.push(...data)
  }
}
</script>

<style scoped>
.middle-content {
  display: flex;
  flex-wrap: wrap;
  padding: 1rem 0;
  margin-bottom: 2rem;
}
.middle-form >>> .b-nav.item {
  padding: 0.5rem 0.6rem;
}
.middle-form .nav-link {
  padding: .5rem .6rem;
}
::v-deep .collapsed {
  /* background-color: cornflowerblue; */
  border: none;
  color: #778899;
}
::v-deep .not-collapsed:hover {
  background-color: white;
  border-color: cornflowerblue;
  color: #778899;
}
::v-deep .btn-outline-primary:hover {
  background-color: white;
  border-color: cornflowerblue;
  color: #778899;
}
/* 响应式 */
@media (min-width: 270px) and (max-width: 575.98px) {
  ::v-deep .collapsed,
  ::v-deep .btn {
    font-size: 14px;
  }
  .icon {
    font-size: 220%;
  }
}
@media (min-width: 576px) and (max-width: 767px) {
  ::v-deep .collapsed,
  ::v-deep .btn {
    font-size: 24px;
  }
  .icon {
    font-size: 300%;
  }
}
@media (min-width: 767px) and (max-width: 991.98px) {
  ::v-deep .collapsed,
  ::v-deep .btn {
    font-size: 26px;
  }
  .icon {
    font-size: 350%;
  }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  ::v-deep .collapsed,
  ::v-deep .btn {
    font-size: 28px !important;
  }
  .icon {
    font-size: 350%;
  }
}
@media (min-width: 1200px) {
  ::v-deep .collapsed,
  ::v-deep .btn {
    font-size: 30px !important;
  }
  .icon {
    font-size: 400%;
  }
}
</style>
